<template>
    <!-- 外层 div 用于支撑高度，防止面板切换时页面抖动-->
    <div>
        <!-- 激活时的面板-->
        <div :style="active_style">
            <slot name="active"></slot>
        </div>

        <!-- 未激活时的面板-->
        <div :style="inactive_style">
            <slot name="inactive"></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {reactive, watch} from 'vue'

/**
 * 面板内容转换
 *
 * 淡出后消失，然后在淡入新的面板
 *
 * 备选方案有很多，当前设计的重点是动画特效
 */
interface Props {
    // 激活状态
    active?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    active: true
})

const active_style = reactive({
    transition: 'opacity 0.3s ease, visibility 0.3s ease',
    opacity: 1,
    display: 'block',
});

const inactive_style = reactive({
    transition: 'opacity 0.3s ease, visibility 0.3s ease',
    opacity: 1,
    display: 'none'
});

watch(() => props.active, value => {
    if (value) {
        inactive_style.valueOf().opacity = 0.1;

        setTimeout(() => {
            inactive_style.valueOf().display = 'none';

            active_style.valueOf().opacity = 1;
            active_style.valueOf().display = '';
        }, 300);
    } else {
        active_style.valueOf().opacity = 0.1;

        setTimeout(() => {
            active_style.valueOf().display = 'none';

            inactive_style.valueOf().opacity = 1;
            inactive_style.valueOf().display = '';
        }, 300);
    }
});
</script>

<style lang="scss" scoped>
</style>
